(function () {
    $.fn.extend({
        myscroll() {
            var i = 0
            $(this).find(".arrl").on("click", () => {
                i--; if (i < 0) {
                    i = 0
                }
                this.find("ul").animate({
                    left: -74 * i
                })

            })
            $(this).find(".arrr").on("click", () => {
                i++; if (i > this.find("ul").children().length - 5) {
                    i = this.find("ul").children().length - 5
                }
                this.find("ul").animate({
                    left: -74 * i
                })
            })
        },
        morebig() {
            var box = $(this)
            var middleimg = $(this).find(".imgchange")
           
            var middlearea = $(this).find(".middlearea")
            var bigimg = $(this).find(".bigimg")
            var bigarea = $(this).find(".bigarea")
            middlearea.css({
                width: bigarea.width() / bigimg.width() * middleimg.width(),
                height: bigarea.height() / bigimg.height() * middleimg.height(),
            })
            let scale = bigarea.width() / middlearea.width()
            console.log(scale)
            middleimg.on("mouseenter", () => {
                middlearea.css("display", "block");
                bigarea.css("display", "block");
            })

            middleimg.on("mousemove", (evt) => {
                var e = evt || window.event;
                var mX = e.pageX - box.offset().left -  middlearea.width() / 2;
                var mY = e.pageY - box.offset().top - middlearea.height() / 2;
                // console.log(e.pageX)
                // console.log(box.offset().left)
                // console.log(middleimg.offset().left)
                // console.log(middlearea.width())
                // console.log(mX);
                // console.log(mY)
                if (mX <= 0) {
                    mX = 0;
                }
                if (mX >= middleimg.width() - middlearea.width()) {
                    mX = middleimg.width() - middlearea.width();
                }

                if (mY <= 0) {
                    mY = 0;
                }
                if (mY >= middleimg.height() - middlearea.height()) {
                    mY = middleimg.height() - middlearea.height();
                }
                middlearea.css({
                    left: mX,
                    top: mY
                })
                bigimg.css({
                    left: (scale - 1) * mX * -1,
                    top: scale * mY * -1
                })
            })
            middleimg.on("mouseleave", () => {
                middlearea.css("display", "none");
                bigarea.css("display", "none");

                // $(middleimg).off("mousemove");
            })
        },
        imgchanging(){
            this.find(".scroll").find("li").on("mouseenter",function(){
                var index=$(this).index()
                console.log(index)
                console.log($(this))
                $(".imgchange").find("ul").css({top:-457*index})
                $(".bigimg").find("ul").css({top:-800*index})
                console.log( $(".bigarea").find("ul"))
            })
        },
        addcar(){
            this.on("click",function(){ 
                if(!confirm("加入购物车?")){
                    return
                }
                var locallist=JSON.parse(localStorage.getItem('name')||'[]');
                
                var i={
                    id:1,
                    name:'女子圆领短T恤 DF612092',
                    price:59,
                    size:'XS',
                    Num:1,
                }
                if(locallist.length==0){
                    locallist.push(i);
                    localStorage.setItem("name",JSON.stringify(locallist))
                }else{
                    locallist[0].Num = Number(locallist[0].Num)+1;
                    localStorage.setItem("name",JSON.stringify(locallist))
 
                }
                console.log(locallist);
            })
        }
    })
})();


$(function () {
    $(".scroll").myscroll();
    $(".leftcontent").morebig();
    $(".leftcontent").imgchanging();
    $("#btn-add").addcar()
})